<template>
  <div>
  <el-dialog :title="'商品审核'" :close-on-click-modal="false" :visible.sync="visible" width="80%">
    <el-card class="box-card">
      <div class="view-goods-panel">
        <table class="view-goods-table">
          <tr><th width="20%">商品名:</th><td width="30%">{{this.goodName}}</td>
          <th width="20%">所属店铺:</th><td width="30%">{{this.shopName}}</td></tr>
          <tr><th>商品价格:</th><td>{{this.price}}</td><th>所属分类</th><td>{{this.firstTypeName}}-{{this.secondTypeName}}</td></tr>
          <tr><th>成本价:</th><td>{{this.costPrice}}</td><th>商品状态:</th><td>
          <el-tag v-if="this.state === -1" size="small" type="info" class="shopGoodsState">失效</el-tag>
          <el-tag v-if="this.state === 0" size="small" type="warning" class="shopGoodsState">待审核</el-tag>
          <el-tag v-if="this.state === 10" size="small" type="danger" class="shopGoodsState">审核不通过</el-tag>
          <el-tag v-if="this.state === 50" size="small" type="success" class="shopGoodsState">审核通过</el-tag>
          <el-tag v-if="this.state === 100" size="small" class="shopGoodsState">正常</el-tag>
          </td></tr>
           <tr><th width="20%">规格参数:</th><td colspan="3" width="80%">
           <div class="view-goods-specifi" v-for="(item,index) in specifications" :key="index">
              <div class="view-goods-specifi-div">{{item.specificationName}}:</div>
              <div>
                <el-tag type="info" style="margin-right:8px;min-width:60px;text-align:center;" v-for="(child,childIndex) in item.specificationValues" :key="childIndex">{{child.specValueName}}</el-tag>
              </div>
           </div>
           </td></tr>
           <tr><th>商品简介:</th><td colspan="3">{{this.remark}}</td></tr>
           <tr><th>商品主图:</th><td colspan="3">
             <img v-for="(img,index) in mainGoodUrl" :key="index" :src="img.url"></img>
           </td></tr>
           <tr><th>详情描述:</th><td colspan="3" v-html="remarkList"></td></tr>
        </table>
      </div>
    </el-card>
    <div class="oper-panel">
      <el-button icon="el-icon-close" type="danger" round @click="auditReject()">审核不通过</el-button>
      <el-button v-if="isAuth('shopgoods:back:audit')" icon="el-icon-check" type="primary" round  @click="auditSubmit(50)">审核通过</el-button>
    </div>
    <!-- <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
    </span> -->
  </el-dialog>
  <audit-suggest v-if="suggestVisible" ref="auditSuggest" @refreshView="auditRejectAfter()"></audit-suggest>
</div>
</template>

<script>
  import AuditSuggest from './shopGoodsAudit-suggest'
  export default {
    data () {
      return {
        visible: false,
        shopGoodId: '',
        goodName: '',
        shopId: '',
        shopName: '',
        firstTypeName: '',
        secondTypeName: '',
        price: 0,
        costPrice: 0,
        state: 0,
        remark: '',
        mainGoodUrl: [],
        specifications: [],
        remarkList: '',
        suggestVisible: false
      }
    },
    components: {
      AuditSuggest
    },
    methods: {
      init (id) {
        this.visible = true
        console.log(id)
        this.shopGoodId = id
        this.$http({
          url: this.$http.adornUrl(`/pig-center-biz/shopgoods/back/info`),
          method: 'get',
          params: this.$http.adornParams({
            'id': this.shopGoodId
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            console.log(data)
            this.goodName = data.good.goodName
            this.shopId = data.good.cid
            this.shopName = data.good.shopName
            this.firstTypeName = data.good.firstTypeName
            this.secondTypeName = data.good.secondTypeName
            this.price = data.good.price
            this.costPrice = data.good.costPrice
            this.state = data.good.state
            this.remark = data.good.remark
            this.mainGoodUrl = data.good.mainGoodUrl
            this.specifications = data.good.specifications
            this.remarkList = data.good.remarkList
          }
        })
      },
      auditSubmit (stateCode) {
        this.$http({
          url: this.$http.adornUrl(`/pig-center-biz/shopgoods/back/audit`),
          method: 'post',
          params: this.$http.adornParams({
            'shopGoodId': this.shopGoodId,
            'state': stateCode
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      auditReject () {
        this.suggestVisible = true
        this.$nextTick(() => {
          this.$refs.auditSuggest.init(this.shopGoodId, this.shopId)
        })
      },
      auditRejectAfter () {
        this.visible = false
        this.$emit('refreshDataList')
      }
    }
  }
</script>
<style>
  .oper-panel{
    width:100%;
    height:40px;
    position:reactive;
    bottom:0px;
    text-align:center;
    margin-top: 20px;
  }
  .view-goods-panel{
    width: 100%;
    height: 450px;
    overflow-x: hidden;
  }
  .view-goods-table{
    width:100%;
    border: 1px solid #DCDFE6;
    border-collapse: collapse;
    word-wrap:break-word;
    word-break:break-all;
  }
  .view-goods-table th{
    border: 1px solid #DCDFE6;
    background-color: #EBEEF5;
    height: 40px;
    text-align:right;
    padding-right:8px;
  }
  .view-goods-table td{
    border: 1px solid #DCDFE6;
    height: 40px;
    padding-left:8px;
  }
  .view-goods-specifi{
    margin-bottom: 8px;
    margin-top: 8px;
  }
  .view-goods-specifi-div{
    font-weight: bold;
  }
  .shopGoodsState{
    width: 80px;
  }
</style>
